import { Tabs } from '@aws-amplify/ui-react';

## Authenticator Container, Header & Footer Slots

The Authenticator has several "slots" that you can customize to add messaging & functionality to meet your app's needs.

The Authenticator itself has the following optional slots which are rendered on each subcomponent:
- `Container` - Wraps the `Authenticator`. Can be overridden by extending `Authenticator.Container` or with a `View` component
- `Footer` - renders below subcomponent content, no default provided
- `Header` - renders above subcomponent content, no default provided

> The default `Container` component contains keyboard aware scroll behavior.

```jsx expoSnack file=../../../../../../../examples/react-native/src/features/Authenticator/Slots/Example.tsx

```

## Subcomponent Header & Footer Slots

Addtionally, the subcomponents themselves have `Header` and `Footer` slots specific to a subcomponent:
- `Footer` - renders below subcomponent buttons, above top level `Footer`, no default provided
- `Header` - renders above subcomponent content, below top level `Header`, default renders subcomponent title

```jsx expoSnack file=../../../../../../../examples/react-native/src/features/Authenticator/ComponentSlots/Example.tsx

```

## Subcomponent Override Slots

The `Authenticator` subcomponents can be overridden allowing for advanced use cases:

```jsx expoSnack file=../../../../../../../examples/react-native/src/features/Authenticator/Component/Example.tsx

```

### Override components with third-party component library 
The following example shows how to override each component in the Authenticator to produce a distinct look and feel using a third-party component library.

<Tabs.Container defaultValue="example">
  <Tabs.List style={{ overflowX: 'scroll' }}>
    <Tabs.Item value="example">Example.tsx</Tabs.Item>
    <Tabs.Item value="confirm-reset-password">
      ConfirmResetPassword.tsx
    </Tabs.Item>
    <Tabs.Item value="confirm-sign-in">ConfirmSignIn.tsx</Tabs.Item>
    <Tabs.Item value="confirm-verify-user">ConfirmVerifyUser.tsx</Tabs.Item>
    <Tabs.Item value="force-new-password">ForceNewPassword.tsx</Tabs.Item>
    <Tabs.Item value="forgot-password">ForgotPassword.tsx</Tabs.Item>
    <Tabs.Item value="select-mfa-type">SelectMfaType.tsx</Tabs.Item>
    <Tabs.Item value="setup-email">SetupEmail.tsx</Tabs.Item>
    <Tabs.Item value="setup-totp">SetupTotp.tsx</Tabs.Item>
    <Tabs.Item value="sign-in">SignIn.tsx</Tabs.Item>
    <Tabs.Item value="sign-up">SignUp.tsx</Tabs.Item>
    <Tabs.Item value="verify-user">VerifyUser.tsx</Tabs.Item>
    <Tabs.Item value="components">components.tsx</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="example">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/Example.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="confirm-reset-password">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ConfirmResetPassword.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="confirm-sign-in">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ConfirmSignIn.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="confirm-verify-user">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ConfirmVerifyUser.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="force-new-password">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ForceNewPassword.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="forgot-password">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ForgotPassword.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="select-mfa-type">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SelectMfaType.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="setup-email">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SetupEmail.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="setup-totp">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SetupTotp.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="sign-in">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SignIn.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="sign-up">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SignUp.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="verify-user">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/VerifyUser.tsx
    ```
  </Tabs.Panel>
  <Tabs.Panel value="components">
    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/components.tsx
    ```
  </Tabs.Panel>
</Tabs.Container>
